<template>
  <el-drawer
    size="580px"
    title="选择资产类型"
    append-to-body
    custom-class="asset-select-drawer"
    :modelValue="props.modelValue"
    @update:model-value="(v) => emit('update:model-value', v)"
  >
    <div v-for="(item, index) in assetList" :key="'assetList'+index">
      <div class="border-b-1px border-b-#ebebeb border-b-solid pb-5px text-13px color-#115ddb">{{ item.name }}</div>
      <div v-for="(key, i) in item.children" :key="'assetItem'+i" class="text-12px">
        <div v-if="key.name" class="international-flag mt-10px color-#606266">{{ key.name }}</div>
        <div class="p-10px">
          <el-row>
            <el-col v-for="(sql, j) in key.children" :key="'sql'+j" :span="8">
              <div class="mb-10px cursor-pointer" @click="handleSqlSelect(sql)">
                <img class="h-auto w-22px pr-5px v-btm" :src="getDbIcon(sql.name)" />
                <span>{{sql.showName}}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import { getAssetTypeEnum } from "@/api/asset/taskManage/dataCollect";

const emit = defineEmits(["update:model-value"]);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'none'
  }
})
const loading = ref(false)
let assetList = ref([])

function cancel() {
  emit('update:model-value', false)
}

function handleSqlSelect(sql) {
  emit('update-asset-type', sql)
}

async function getAssetType() {
  const data = await getAssetTypeEnum()
  if (props.type == 'none') {
    assetList.value = data
  } else if (props.type == 'dbSource') {
    assetList.value = data.filter((item) => {
      return item.name != '文件服务'
    })
  } else if (props.type == 'fileSource') {
    assetList.value = data.filter((item) => {
      return item.name == '文件服务'
    })
  }
}

function getDbIcon(name) {
  let path = ''
  let photo = ''
  path = import.meta.globEager('@/assets/imgs/db_icons/*')
  photo = `/src/assets/imgs/db_icons/${name.toLowerCase()}.png`
  if (path[photo] != undefined) {
    return path[photo].default
  } else {
    photo = `/src/assets/imgs/db_icons/default.png`
    return path[photo].default
  }
}

onMounted(() => {
  getAssetType()
})
</script>
<style lang="scss">
.asset-select-drawer {
  .el-drawer__header {
    margin-bottom: 10px;
  }
  &.el-drawer .el-drawer__body {
    padding: 20px !important;
  }
  .international-flag {
    &::before {
      content: ' ';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 100%;
      background-color: #e6a23c;
      margin-right: 5px;
    }
  }
}
</style>
